第 1 步 - 插值指南针表盘的旋转

在教程的这一步骤中，您将学习使用属性目标插值器 (Property Target Interpolator) 插值指南针表盘的旋转，随着时间的推移从当前方向插值到目标方向。

教程资产

本教程的起点资料是存储在<KanziWorkspace>/Tutorials/Interpolate/Start/Tool_project 目录中的Interpolate.kzproj Kanzi Studio 工程文件。

<KanziWorkspace>/Tutorials/Interpolate/Completed/Tool_project 目录包含本教程已完成的 Kanzi Studio 工程。

起点工程包含完成本教程所需的内容：

• RootPage 节点包含数据上下文和绑定以接收指南针目的地和行驶方向以及状态机。
  
  • 数据上下文。工程使用XML_data_source 插件从 XML 数据源获取数据。
    在文本编辑器中打开 <ProjectName>/Application/bin/Compass.xml 文件并更改 destination 或direction XML 元素中的值。保存文件时，XML_data_source 插件会更新工程中的数据对象并将更新的值显示在 Kanzi Studio 预览 (Preview) 中。要在 数据源 (Data Sources) 窗口中查看更新的值，在 数据源 (Data Sources) 中点击 XML data source. Kanzi Studio 会重新加载该数据源的数据并更新数据对象及其值。 旁的 。
    
    建议

    要查看数据源 (Data Sources) 窗口，在 Kanzi Studio 主菜单中选择窗口 (Window) > 数据源 (Data Sources)。

    通过设置，指南针表盘根据从数据源接收的值旋转。但这种变化是即时的，没有动画化。在教程的这一步骤中，您将学习使用属性目标插值器 (Property Target Interpolator) 将指南针表盘的旋转动画化，随着时间的推移从当前方向插值到目标方向。
    
  • 绑定。RootPage 节点有以下绑定：
    • Interpolate.Destination 属性绑定到 Compass.xml 文件中的destination XML 元素的值。
    • Interpolate.Direction 属性绑定到 Compass.xml 文件中的direction XML 元素的值。
    
  • 状态机。RootPage State Manager设置RootPage 节点的背景颜色。使用 Interpolate.OnCourse 自定义控制器属性来实现。状态机有两种状态：
    • Interpolate.OnCourse 属性的值设为 false 时，OffCourse 状态将RootPage 节点的背景设为黑色。
    • Interpolate.OnCourse 属性的值设为 true 时，OnCourse 状态将RootPage 节点的背景设为绿色。
    使用本教程第 2 步中的状态机设置指南针背景颜色。
    
• Dial 节点将构成指南针表盘的元素分组。
  
  • Degrees 节点包含以 30 度间隔显示度数的节点。
  • Cardinal Points 节点包含显示基本方位的节点。
  • Ticks 节点显示刻度标记。
  Dial 节点具有到RootPage 节点中的Interpolate.Direction 属性的绑定，根据 Compass.xml 文件中的direction XML 元素的值旋转节点。
  
• Direction 节点包含当前在指南针中心以度数显示的方向。
  Value 节点的文本 (Text) 属性绑定到RootPage 中的Interpolate.Direction 属性的值，其从 Compass.xml 中的direction XML 元素获取值。
  
• Direction of Travel 节点包含指示当前行驶方向的箭头，始终指向上方。
  
• Destination 节点包含显示当前目的地的节点。
  • Destination 节点具有根据RootPage 节点的Interpolate.Direction 属性的值旋转节点的绑定。
  • Destination Offset 节点具有根据RootPage 节点中的Interpolate.Destination 属性的值旋转节点的绑定。
  • Destination Arrow 节点包含指示当前目的地的绿色箭头。
    Destination 和 Destination Offset 节点中的绑定一起使 Destination Arrow 节点根据 Compass.xml 文件中的 destination 和 direction XML 元素中的值绕指南针表盘旋转。
  

插值指南针表盘的旋转

在本节中，您将学习动画化指南针表盘的旋转，在行驶方向改变时，属性目标插值器 (Property Target Interpolator) 随着时间的推移将当前值插值到目标值。

属性目标插值器 (Property Target Interpolator) 模拟永远不会超调的弹簧阻尼系统的行为。您可以使用加速 (Acceleration) 属性设置弹簧移动物体所用的力，并使用阻力 (Drag) 属性设置阻尼系数。加速 (Acceleration) 属性的值越大，该属性就越快达到其新值。阻力 (Drag) 属性的值越大，最大插值速度就越小。

要插值指南针表盘的旋转：

1. 在素材库 (Library) 中按下 Alt 并右键点击属性类型 (Property Types)，选择属性类型 (Property Type) 并在新建属性类型 (New Property Type) 窗口中设置：
   • 名称 (Name) 为Interpolate.Interpolator
   • 数据类型 (Data Type) 为浮点 (Float)
   创建Interpolate.Interpolator 属性类型，因为您要插值数据类型为整数的Interpolate.Direction 属性。要插值数据类型不是浮点的属性，需要创建一个浮点属性类型，并将要插值的属性绑定到您创建的浮点属性。
   
2. 绑定 Dial 节点的旋转到上一步中创建的属性：
   1. 在工程 (Project) 中，选择 Dial 节点，在属性 (Properties) 中点击绑定 (Bindings) 现有绑定进行编辑，在绑定参数编辑器 (Binding Argument Editor)中将表达式 (Expression) 设为：

      CreateRotationZ({@./Interpolate.Interpolator})

      点击保存 (Save)。
      使用绑定根据Interpolate.Interpolator 属性的值旋转Dial 节点。
      
   2. 在属性 (Properties) 中点击+ 添加绑定 (+ Add Binding) 并在绑定参数编辑器 (Binding Argument Editor) 中设置：
      • 属性 (Property) 为Interpolate.Interpolator
      • 表达式 (Expression) 为

        {#RootPage/Interpolate.Direction}

      点击保存 (Save)。
      将Interpolate.Interpolator 属性绑定到用于控制旋转的RootPage 节点中的Interpolate.Direction 属性。
      
3. 将属性目标插值器 (Property Target Interpolator) 添加到要插值旋转的节点：
   1. 在工程 (Project) 中选择Dial 节点，在节点组件 (Node Components) > 动画 (Animation) 部分点击+ 添加动画 (+ Add Animation) 并选择属性目标插值器 (Property Target Interpolator)。
      使用属性目标插值器 (Property Target Interpolator)，随着时间的推移将Interpolate.Interpolator 属性的值插值到目标值。您在上一步骤中创建的绑定将更改应用到Dial 节点的旋转。
      
   2. 在节点组件 (Node Components) > 动画 (Animation) 区域的 属性目标插值器 (Property Target Interpolator) 中设置：
      • 插值属性类型 (Interpolated Property Type) 为Interpolate.Interpolator
      • 加速 (Acceleration) 为 5
        
      • 阻力 (Drag) 为 2
        
      属性目标插值器 (Property Target Interpolator) 模拟永远不会超调的弹簧阻尼系统的行为。您可以使用加速 (Acceleration) 属性设置弹簧移动物体所用的力，并使用阻力 (Drag) 属性设置阻尼系数。加速 (Acceleration) 属性的值越大，该属性就越快达到其新值。阻力 (Drag) 属性的值越大，最大插值速度就越小。
      

现在，您更改 <ProjectName>/Application/bin/Compass.xml 中的 direction XML 元素并保存文件后，属性目标插值器 (Property Target Interpolator) 会随着时间的推移将指南针表盘的旋转内插到目标值。

另请参阅

插值属性值

使用绑定

使用触发器

数据源

使用状态机

打开导航